<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>葱花</title>
    <meta name="description" content="方块图片">
    <style>
        body {
            background-color: black;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            padding: 0;
        }

        .main {
            width: 100px;
            height: 100px;
            transform-style: preserve-3d;
            position: relative;
        }

        .box {
            position: absolute;
            width: 100px;
            height: 100px;
            color: white;
            font-size: 40px;
            text-align: center;
            line-height: 200px;
            user-select: none;
            opacity: .8;
            transition: all 1s;
            -moz-transition: all 1s;
            -webkit-transition: all 1s;
            -o-transition: all 1s;
        }

        .box:nth-child(1) {
            background-color: rgba(255, 0, 0, .6);
            transform: translateZ(50px);
        }

        .select {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 80%;
            display: flex;
            justify-content: space-between;
            padding: 20px 10%;
        }

        .select button {
            width: 40%;
            background-color: #fff;
            border: 0;
            padding: 5px;
            border-radius: 10px;
            outline: 0;
        }

        .select button:focus {
            background-color: DeepSkyBlue;
            color: white;
        }
    </style>
</head>

<body>
    <div class="select">
        <button class='btn' data-id="0">触摸</button>
        <button class='btn' data-id="1">手机移动</button>
    </div>
    <div class="main" id="main" style="transform: rotateX(-20deg) rotateY(-20deg)"></div>
</body>
<script src="../tj.js"></script>
<script>
    let main = document.getElementById('main');
    let arr = ['./img/1.jpg', "./img/6.jpg", "./img/2.jpg", "./img/3.jpg", "./img/4.jpg", "./img/5.jpg"];
    let inner = shuffle(arr);
    mf(main, "div1", 50, inner);
    let outer = shuffle(arr);
    mf(main, "anim", 50, outer, true);

    main.onmousedown = function (ele) {
        let xy = main.style.transform.split(" ");
        let tx = parseInt(xy[0].substring(0, xy[0].length - 4).substr(8));
        let ty = parseInt(xy[1].substring(0, xy[1].length - 4).substr(8));
        main.onmousemove = function (el) {
            let x = el.clientX - ele.clientX;
            let y = el.clientY - ele.clientY;
            main.style.transform = `rotateX(${-y + tx}deg) rotateY(${x + ty}deg)`;
        }
        document.onmouseup = () => main.onmousemove = null;
    }
    function mf(elem, divClass, distance, arr, flag = false) {
        let div1 = document.createElement("div");
        div1.id = divClass
        let face = [-180, -90, -270, -90, 90, 0,];
        for (const i in arr) {
            let box = document.createElement("img");
            box.src = arr[i];
            box.className = "box";
            box.onmousedown = (el) => el.preventDefault();
            if (i == 1 || i == 4) {
                box.style.cssText = `transform: rotateY(${face[i]}deg) translateZ(${distance}px);`
            } else {
                box.style.cssText = `transform: rotateX(${face[i]}deg) translateZ(${distance}px);`
            }
            div1.append(box)
        }
        elem.append(div1);


        // console.log(imgArr);
        if (flag) {
            let imgArr = document.getElementById("anim").children
            setTimeout(() => {
                for (const i in arr) {
                    imgArr[i].onmousedown = (el) => el.preventDefault();
                    if (i == 1 || i == 4) {
                        imgArr[i].setAttribute("style", `transform:rotateY(${face[i]}deg) translateZ(${distance + 100}px);`)

                    } else {
                        imgArr[i].setAttribute("style", `transform:rotateX(${face[i]}deg) translateZ(${distance + 100}px);`)
                    }
                }
            }, 2000)
        }
    }
    function shuffle(a) {
        var len = a.length;
        for (var i = 0; i < len; i++) {
            var end = len - 1;
            var index = (Math.random() * (end + 1)) >> 0;
            var t = a[end];
            a[end] = a[index];
            a[index] = t;
        }
        return a;
    };

    // 事件选择
    let roateNum = [];
    btns = document.querySelectorAll('.btn');
    btns.forEach(element => {
        element.addEventListener('click', function (e) {
            let id = element.getAttribute('data-id');
            if (id == 1) {
                roateNum = end();
                main.removeEventListener('touchmove', move);
                //陀螺仪
                window.addEventListener('deviceorientation', gyroscope);
            } else {
                window.removeEventListener('deviceorientation', gyroscope);
                main.addEventListener('touchstart', start);
                main.addEventListener('touchmove', move);
                main.addEventListener('touchend', end);
            }
        });
    });
    // 触摸事件
    let startX = 0, startY = 0;
    let moveX = 0, moveY = 0;

    function start(el) {
        el.preventDefault();
        roateNum = end();
        startX = el.touches[0].clientX;
        startY = el.touches[0].clientY;
    }
    function move(el) {
        moveX = el.touches[0].clientX - startX;
        moveY = el.touches[0].clientY - startY;
        main.style.transform = `rotateX(${roateNum[0] - moveY}deg) rotateY(${roateNum[1] + moveX}deg)`;
    }
    function end() {
        let rotateData = main.style.transform.split(' ');
        return rotateData.map(item => parseInt(item.substring(item.indexOf("(") + 1, item.indexOf("d"))));
    }
    // 陀螺仪
    function gyroscope(e) {
        let x = roateNum[0];
        let y = roateNum[1];
        main.style.transform = `rotateX(${-e.beta + x}deg) rotateY(${e.gamma + y}deg)`;
    }
</script>

</html>